<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NEON-GAME | 粗野主义电玩企业</title>
    <style>
        /* 基础样式与粗野主义风格 */
        :root {
            --concrete: #7d7d7d;
            --concrete-dark: #5a5a5a;
            --concrete-light: #a8a8a8;
            --neon-blue: #00f3ff;
            --neon-pink: #ff00ff;
            --neon-green: #39ff14;
            --black: #0a0a0a;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Courier New', monospace;
        }

        body {
            background-color: var(--black);
            color: white;
            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23333333' fill-opacity='0.2' fill-rule='evenodd'/%3E%3C/svg%3E");
            padding: 20px;
            line-height: 1.6;
        }

        .concrete {
            background-color: var(--concrete);
            border: 2px solid var(--concrete-dark);
            box-shadow: 8px 8px 0px var(--concrete-dark);
            padding: 20px;
            margin-bottom: 30px;
            position: relative;
        }

        /* 导航栏 */
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 30px;
            margin-bottom: 40px;
        }

        .logo {
            font-size: 2.5rem;
            font-weight: bold;
            color: var(--neon-blue);
            text-shadow: 0 0 5px var(--neon-blue);
            letter-spacing: -2px;
        }

        .nav-links {
            display: flex;
            list-style: none;
        }

        .nav-links li {
            margin-left: 30px;
        }

        .nav-links a {
            color: white;
            text-decoration: none;
            font-weight: bold;
            font-size: 1.2rem;
            padding: 5px 10px;
            transition: all 0.3s;
        }

        .nav-links a:hover {
            color: var(--neon-pink);
            text-shadow: 0 0 5px var(--neon-pink);
            background-color: rgba(0, 0, 0, 0.3);
        }

        /* 主内容区 */
        .hero {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 50px;
        }

        .hero-text h1 {
            font-size: 3.5rem;
            line-height: 1.2;
            margin-bottom: 20px;
            color: var(--neon-green);
            text-shadow: 0 0 10px var(--neon-green);
        }

        .hero-text p {
            font-size: 1.2rem;
            margin-bottom: 30px;
        }

        .btn {
            display: inline-block;
            padding: 15px 30px;
            background-color: var(--neon-pink);
            color: black;
            text-decoration: none;
            font-weight: bold;
            border: none;
            box-shadow: 5px 5px 0px var(--black);
            transition: all 0.3s;
            margin-right: 15px;
            cursor: pointer;
        }

        .btn:hover {
            transform: translate(3px, 3px);
            box-shadow: 2px 2px 0px var(--black);
        }

        .btn-outline {
            background: transparent;
            color: var(--neon-pink);
            border: 2px solid var(--neon-pink);
        }

        .hero-image {
            background-color: var(--concrete-dark);
            min-height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            position: relative;
        }

        .pixel-grid {
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            gap: 4px;
            padding: 10px;
        }

        .pixel {
            width: 20px;
            height: 20px;
            background-color: var(--concrete-light);
            animation: flicker 3s infinite alternate;
        }

        .pixel:nth-child(3n) {
            background-color: var(--neon-blue);
        }

        .pixel:nth-child(3n+1) {
            background-color: var(--neon-pink);
        }

        .pixel:nth-child(3n+2) {
            background-color: var(--neon-green);
        }

        @keyframes flicker {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.3;
            }
        }

        /* 游戏展示区 */
        .games-showcase {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 50px;
        }

        .game-card {
            background-color: var(--concrete-dark);
            padding: 0;
            overflow: hidden;
            transition: transform 0.3s;
        }

        .game-card:hover {
            transform: translateY(-10px);
        }

        .game-image {
            height: 180px;
            background-color: var(--concrete-light);
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--black);
            font-weight: bold;
            font-size: 1.5rem;
        }

        .game-info {
            padding: 20px;
        }

        .game-info h3 {
            color: var(--neon-blue);
            margin-bottom: 10px;
            font-size: 1.5rem;
        }

        /* 特性部分 */
        .features {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
            margin-bottom: 50px;
        }

        .feature {
            padding: 30px;
        }

        .feature h3 {
            color: var(--neon-green);
            margin-bottom: 15px;
            font-size: 1.8rem;
        }

        /* 页脚 */
        footer {
            text-align: center;
            padding: 30px;
            border-top: 3px solid var(--concrete-dark);
            margin-top: 50px;
        }

        .social-links {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 20px 0;
        }

        .social-link {
            width: 40px;
            height: 40px;
            background-color: var(--concrete);
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            text-decoration: none;
            font-weight: bold;
            transition: all 0.3s;
        }

        .social-link:hover {
            background-color: var(--neon-pink);
            color: black;
        }

        /* 响应式设计 */
        @media (max-width: 900px) {

            .hero,
            .games-showcase,
            .features {
                grid-template-columns: 1fr;
            }

            nav {
                flex-direction: column;
            }

            .nav-links {
                margin-top: 20px;
            }

            .nav-links li {
                margin: 0 10px;
            }
        }
    </style>
</head>

<body>
    <nav class="concrete">
        <div class="logo">NEON-GAME</div>
        <ul class="nav-links">
            <li><a href="#">首页</a></li>
            <li><a href="#">游戏</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">职业</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </nav>

    <main>
        <section class="hero">
            <div class="hero-text concrete">
                <h1>创造未来的游戏体验</h1>
                <p>我们是NEON-GAME，专注于开发具有颠覆性体验的硬核游戏。我们的作品融合了粗野主义美学与尖端技术，为玩家提供前所未有的游戏体验。</p>
                <div class="buttons">
                    <a href="#" class="btn">探索游戏</a>
                    <a href="#" class="btn btn-outline">了解更多</a>
                </div>
            </div>
            <div class="hero-image concrete">
                <div class="pixel-grid">
                    <!-- 生成100个像素点 -->
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                    <div class="pixel"></div>
                </div>
            </div>
        </section>

        <section class="games-showcase">
            <div class="game-card concrete">
                <div class="game-image">CYBERPUNK 2088</div>
                <div class="game-info">
                    <h3>赛博朋克2088</h3>
                    <p>开放世界RPG游戏，设定在反乌托邦的未来都市。</p>
                </div>
            </div>
            <div class="game-card concrete">
                <div class="game-image">BRUTAL ARENA</div>
                <div class="game-info">
                    <h3>残酷竞技场</h3>
                    <p>快节奏的多人在线战斗竞技游戏，只有最强者才能生存。</p>
                </div>
            </div>
            <div class="game-card concrete">
                <div class="game-image">CONCRETE SOUL</div>
                <div class="game-info">
                    <h3>混凝土之魂</h3>
                    <p>解谜冒险游戏，探索粗野主义建筑中的超现实世界。</p>
                </div>
            </div>
        </section>

        <section class="features">
            <div class="feature concrete">
                <h3>创新技术</h3>
                <p>我们使用自主研发的游戏引擎，提供无与伦比的图形效果和物理模拟，为玩家创造沉浸式体验。</p>
            </div>
            <div class="feature concrete">
                <h3>独特美学</h3>
                <p>粗野主义设计哲学贯穿我们的所有作品，创造出既原始又未来的视觉风格，挑战传统游戏美学。</p>
            </div>
        </section>
    </main>

    <footer class="concrete">
        <div class="social-links">
            <a href="#" class="social-link">F</a>
            <a href="#" class="social-link">T</a>
            <a href="#" class="social-link">I</a>
            <a href="#" class="social-link">Y</a>
        </div>
        <p>© 2023 NEON-GAME 工作室。保留所有权利。</p>
        <p>粗野主义美学 | 未来科技 | 极致游戏体验</p>
    </footer>
</body>

</html>